{% extends 'layout.html' %}
{% block title %}订单管理{% endblock %}

{% block content %}
    <div class="container">
        <div style="margin-bottom: 10px"> {# 按钮"新建部门"和面板表添加10像素的距离 #}
            <a class="btn btn-success" href="/tools/order/add/" target="_blank">
                <span class="glyphicon glyphicon-plus-sign" aria-hidden="true"></span>
                新增订单
            </a>

            <!-- 批量操作按钮组 -->
            <div class="btn-group" style="margin-left: 10px;">
                <button id="batchDelete" class="btn btn-danger" disabled>
                    <span class="glyphicon glyphicon-trash"></span>
                    批量删除
                </button>
            </div>

            <!-- ajax 绑定的按钮 -->
            {#            {% if perms.tools.add_order %}#}
            <button id="btnExt" type="button" class="btn btn-primary btn-xs pull-right" style="margin-left: 10px;">
                查询
            </button>
            <button id="add-order" type="button" class="btn btn-primary btn-xs" style="margin-left: 10px;">新增</button>
            {#            <button id="add" type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal" data-whatever="@mdo">新增</button>#}
            <button id="modify" type="button" class="btn btn-primary btn-xs" style="margin-left: 10px;">修改</button>
            <button id="delete" type="button" class="btn btn-primary btn-xs" style="margin-left: 10px;">删除</button>
            {#            {% endif %}#}

            {% comment %}<!-- 搜索框 -->
            <div style="float: right; width: 300px;">
                <form method="get">
                    <div class="input-group">
                        <input type="text" name="query" class="form-control" placeholder="Search for..."
                            value="{{ search_data }}">
                        <span class="input-group-btn">
                            <button class="btn btn-default" type="submit">
                                <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                            </button>
                        </span>

                    </div>
                </form>
            </div>{% endcomment %}

            <!-- 多条件搜索框 -->
            <div style="float: right; width: 650px;">
                <form method="get" class="form-inline" id="searchForm">
                    <div class="form-group">
                        <input id="search_oid" type="text" name="oid" class="form-control" placeholder="订单号"
                               value="{{ search_oid }}" style="width: 120px;">
                    </div>

                    <div class="form-group">
                        <input id="search_title" type="text" name="title" class="form-control" placeholder="商品名称"
                               value="{{ search_title }}" style="width: 120px;">
                    </div>

                    <div class="form-group">
                        <select id="status_choice" name="status" class="form-control" style="width: 120px;">
                            <option value="">-- 订单状态 --</option>
                            {% for item in status_choice %}
                                <option value="{{ item.0 }}"
                                        {% if search_status == item.0|stringformat:"s" %}selected{% endif %}>
                                    {{ item.1 }}
                                </option>
                            {% endfor %}
                        </select>
                    </div>

                    <div class="form-group">
                        <input id="search_user" type="text" name="user" class="form-control" placeholder="订单用户"
                               value="{{ search_user }}" style="width: 120px;">
                    </div>

                    <button id="btn_search" type="submit" class="btn btn-primary">
                        <span class="glyphicon glyphicon-search" aria-hidden="true"></span>
                        搜索
                    </button>

                    {#                    <a href="/tools/task/list/" class="btn btn-default">#}
                    {#                        <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>#}
                    {#                        重置#}
                    {#                    </a>#}
                    <button id="reset" type="button" class="btn btn-default pull-right">
                        <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>
                        重置
                    </button>
                </form>
            </div>
        </div>

        <div class="panel panel-default">
            <!-- Default panel contents -->
            <div class="panel-heading">
                <span class="glyphicon glyphicon-list" aria-hidden="true"></span>
                任务列表
            </div>

            <!-- Table 表格 -->
            <table class="table table-bordered" id="table-data">  {# table-bordered  边框 #}
                <thead>
                <tr>
                    <th width="50px"><input type="checkbox" id="selectAll"></th>
                    {#                    <th>任务级别</th>#}
                    {#                    <th>任务名称</th>#}
                    {#                    <th>任务详情</th>#}
                    {#                    <th>任务负责人</th>#}
                    <form method="post">
                        {% for field in form %}
                            <th>{{ field.label }}</th>
                        {% endfor %}
                    </form>
                    <th>操作</th>
                </tr>
                </thead>
                <tbody>
                {% for obj in querySet %}
                    <tr>
                        {#                        <td><input type="checkbox" class="rowCheckbox" value="{{ obj.id }}"></td>#}
                        <th scope="row">{{ obj.id }}</th>
                        <td>{{ obj.oid }}</td>
                        <td>{{ obj.title }}</td>
                        <td>{{ obj.price }}</td>
                        <td>{{ obj.get_status_display }}</td>
                        <td>{{ obj.user.username }}</td>
                        <td>
                            <a class="btn btn-primary btn-xs" href="/tools/order/{{ obj.id }}/edit/">编辑</a>
                            {#                            <a class="btn btn-danger btn-xs" href="/tools/task/delete/?nid={{ obj.id }}">删除</a>#}
                            <a class="btn btn-danger btn-xs delete-btn"
                               href="/tools/order/{{ obj.id }}/delete/">删除</a>
                        </td>
                    </tr>
                {% endfor %}

                </tbody>
            </table>
        </div>

        <!-- 分页导航 -->
        <ul class="pagination">
            {#            style="position: absolute;transform: translate(50%);" 居中设置 根据实际情况改动       #}
            {{ page_string }}
        </ul>

    </div>

    <!-- 新增订单模态框 -->
    <div class="modal fade" id="add-article-modal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="exampleModalLabel">添加人员白名单</h4>
                </div>
                <div class="modal-body">
                    <!-- novalidate 关闭浏览器的表单验证，用Django来控制检验 -->
                    <form id='saveForm'>
                        {% csrf_token %}
                        {% for field in form %}
                            <div class="form-group">
                                <label>{{ field.label }}</label>
                                {{ field }}<span class="error" style="color:#ff0000;"> {{ field.errors.0 }}</span>
                            </div>
                        {% endfor %}
                    </form>
                </div>
                <div class="modal-footer">
                    <button id="add-order-cancel" type="button" class="btn btn-default" data-dismiss="modal">取消
                    </button>
                    <button id="add-order-save" type="button" class="btn btn-primary">保存</button>
                </div>
            </div>
        </div>
    </div>

    {#    <div class="modal fade" id="add-article-modal" tabindex="-1" role="dialog">#}
    {#    <div class="modal-dialog" role="document">#}
    {#        <div class="modal-content">#}
    {#            <div class="modal-header">#}
    {#                <button type="button" class="close" data-dismiss="modal">&times;</button>#}
    {#                <h4 class="modal-title">添加人员白名单</h4>#}
    {#            </div>#}
    {#            <form id="add-modal-form" class="form-horizontal">#}
    {#                <div class="modal-body">#}
    {#                    <!-- novalidate 关闭浏览器的表单验证，用Django来控制检验 -->#}
    {#                    <form id='saveForm'>#}
    {#                        {% csrf_token %}#}
    {#                        {% for field in form %}#}
    {#                            <div class="form-group">#}
    {#                                <label>{{ field.label }}</label>#}
    {#                                {{ field }}<span class="error" style="color:#ff0000;"> {{ field.errors.0 }}</span>#}
    {#                            </div>#}
    {#                        {% endfor %}#}
    {#                                        <button type="submit" class="btn btn-primary">保存</button>#}
    {#                    </form>#}
    {#                </div>#}
    {#                <div class="modal-footer">#}
    {#                    <button type="cancel" class="btn btn-default">取消</button>#}
    {#                    <button type="submit" class="btn btn-primary">保存</button>#}
    {#                </div>#}
    {#            </form>#}
    {#        </div>#}
    {#    </div>#}
    {#</div>#}

{% endblock %}


{% block css %}
    <style>
        /* 修复模态框变灰问题 */
        .modal-backdrop {
            z-index: 1040 !important;
            background-color: rgba(0, 0, 0, 0.5) !important;
        }

        .modal {
            z-index: 1050 !important;
            background-color: transparent !important;
        }

        .modal-content {
            background-color: #fff;
        }
    </style>
{% endblock %}


{% block js %}
    <script>
    // 查询
    {#$('#btnExt').on('click',function(){#}
    {#    $('#table-data').bootstrapTabls('refersh')#}
    {#});#}

    $('#btnExt').on('click', function(e) {
    e.preventDefault();

    $.ajax({
        url: "{% url 'order_search' %}",
        method: "GET",
        data: $(this).serialize(),
        beforeSend: function() {
            $('#order-table-body').html(`
                <tr>
                    <td colspan="6" class="text-center">
                        <div class="spinner-border" role="status">
                            <span class="visually-hidden">加载中...</span>
                        </div>
                    </td>
                </tr>
            `);
        },
        success: function(data) {
            const tableBody = $('#order-table-body');
            tableBody.empty();

            if (data.orders.length === 0) {
                tableBody.html(`
                    <tr>
                        <td colspan="6" class="text-center text-muted">没有找到匹配的订单</td>
                    </tr>
                `);
                return;
            }

            $.each(data.orders, function(index, order) {
                const row = `
                    <tr>
                        <td>${order.id}</td>
                        <td>${order.oid}</td>
                        <td>${order.title}</td>
                        <td>${order.price}</td>
                        <td>${order.status_display}</td>
                        <td>
                            <a class="btn btn-sm btn-primary" href="/order/edit/${order.id}">编辑</a>
                            <a class="btn btn-sm btn-danger" href="/order/delete/${order.id}">删除</a>
                        </td>
                    </tr>
                `;
                tableBody.append(row);
            });
        },
        error: function(xhr) {
            $('#order-table-body').html(`
                <tr>
                    <td colspan="6" class="text-center text-danger">加载数据失败: ${xhr.statusText}</td>
                </tr>
            `);
        }
    });
});

    // 重置
    $('#reset').click(function () {
        $('#search_oid').val('');
        $('#search_title').val('');
        $('#search_detail').val('');
        $('#status_choice').val('');
        $('#search_user').val('');
    });

    {#$('#reset').addEventListener('click', function() {#}
    {#    // 重置表单到初始状态（清空所有输入值）#}
    {#    $('#searchForm').reset();#}
    {#});#}

        //新增
        {#$("#add").click(function ()#}
        $('#add-order').on('click', function () {
            $("#add-article-modal").modal("show");
        });

        {#$(document).ready(function() {#}
        {#    // 新增按钮点击事件#}
        {#    $("#add").click(function() {#}
        {#        // 清空表单#}
        {#        $("#add-modal-form")[0].reset();#}
        {#        // 显示模态框#}
        {#        $("#add-article-modal").modal({#}
        {#            backdrop: 'static',#}
        {#            keyboard: false#}
        {#        });#}
        {#    });#}

        // 新增 表单提交

        {#$("#add-order-save").click(function (e) {#}
        {#    e.preventDefault();#}
        {#    $.ajax({#}
        {#        type: "POST",#}
        {#        url: '{% url "order_ajax_add" %}',#}
        {#        data: $('#saveForm').serialize(),#}
        {#        {% comment %}data: {#}
        {#            num: $("#add_domain").val(),#}
        {#            operation_user: $("#add_operation_user").val(),#}
        {#            operation_user_name: $("#add_operation_user_name").val(),#}
        {#            position: $("#add_position").val(),#}
        {#            csrfmiddlewaretoken: '{{ csrf_token }}'#}
        {#        },{% endcomment %}#}
        {#        success: function (data) {#}
        {#            if (data.ret) {#}
        {#                $("#add-article-modal").modal("hide");#}
        {#                toastr.success("数据添加成功！", "成功提示!");#}
        {#                location.reload();#}
        {#                // 重新加载表格数据#}
        {#                $.ajax({#}
        {#                    url: window.location.href,  // 当前页面的 URL#}
        {#                    type: "GET",#}
        {#                    success: function (response) {#}
        {#                        const newTableBody = $(response).find("tbody").html();#}
        {#                        $("tbody").html(newTableBody);#}
        {#                    },#}
        {#                    error: function (xhr, status, error) {#}
        {#                        toastr.error("表格刷新失败: " + error, "错误提示!");#}
        {#                    }#}
        {#                });#}
        {#            } else {#}
        {#                toastr.warning(data.msg, "告警提示!");#}
        {#            }#}
        {#        },#}
        {#        error: function (xhr, status, error) {#}
        {#            toastr.error("请求失败: " + error, "错误提示!");#}
        {#        }#}
        {#    });#}
        {#});#}

        // 新增表单提交
        {#$("#add-order-save").click(function (e) {#}
        {#    e.preventDefault();#}
        {#    $.ajax({#}
        {#        type: "POST",#}
        {#        url: '{% url "order_ajax_add" %}',#}
        {#        data: $('#saveForm').serialize(),#}
        {#        success: function (data) {#}
        {#            if (data.ret) {#}
        {#                // 关闭模态框#}
        {#                $("#add-article-modal").modal("hide");#}
        {#                toastr.success("数据添加成功！", "成功提示!");#}
        {#                #}
        {#                // 仅更新表格数据（不刷新整个页面）#}
        {#                $.ajax({#}
        {#                    url: window.location.href,  // 请求当前页面的表格数据#}
        {#                    type: "GET",#}
        {#                    success: function (response) {#}
        {#                        // 提取新页面中的表格内容并替换现有表格#}
        {#                        const newTableBody = $(response).find("tbody").html();#}
        {#                        $("tbody").html(newTableBody);#}
        {##}
        {#                        // 同时更新分页控件（如果有新数据导致分页变化）#}
        {#                        const newPagination = $(response).find(".pagination").html();#}
        {#                        $(".pagination").html(newPagination);#}
        {#                    },#}
        {#                    error: function (xhr, status, error) {#}
        {#                        toastr.error("表格数据更新失败: " + error, "错误提示!");#}
        {#                    }#}
        {#                });#}
        {#            } else {#}
        {#                toastr.warning(data.msg, "告警提示!");#}
        {#            }#}
        {#        },#}
        {#        error: function (xhr, status, error) {#}
        {#            toastr.error("请求失败: " + error, "错误提示!");#}
        {#        }#}
        {#    });#}
        {#});#}


{#            $(document).ready(function() {#}
{#    // 显示模态框#}
{#    $('#addBtn').click(function() {#}
{#        $('#addModal').modal('show');#}
{#    });#}
{##}
{#    // 表单提交#}
{#    $('#orderForm').submit(function(e) {#}
{#        e.preventDefault();#}
{##}
{#        $.ajax({#}
{#            url: '{% url "order_ajax_add" %}',#}
{#            type: 'POST',#}
{#            data: $(this).serialize(),#}
{#            dataType: 'json',#}
{#            success: function(response) {#}
{#                if (response.status) {#}
{#                    // 关闭模态框并清空表单#}
{#                    $('#addModal').modal('hide');#}
{#                    $('#orderForm')[0].reset();#}
{##}
{#                    // 动态添加新行到表格#}
{#                    const newRow = `#}
{#                        <tr>#}
{#                            <td>${response.new_order.id}</td>#}
{#                            <td>${response.new_order.oid}</td>#}
{#                            <td>${response.new_order.title}</td>#}
{#                            <td>${response.new_order.price}</td>#}
{#                            <td>${response.new_order.status}</td>#}
{#                            <td>${response.new_order.user}</td>#}
{#                        </tr>#}
{#                    `;#}
{#                    $('#orderTable tbody').append(newRow);#}
{##}
{#                    // 或者使用下面方法重新加载整个表格#}
{#                    // loadOrderTable();#}
{#                } else {#}
{#                    alert('保存失败: ' + JSON.stringify(response.errors));#}
{#                }#}
{#            },#}
{#            error: function(xhr) {#}
{#                alert('请求错误: ' + xhr.statusText);#}
{#            }#}
{#        });#}
{#    });#}
{#});#}
{##}
{#// 可选：重新加载整个表格的函数#}
{#function loadOrderTable() {#}
{#    $.get(window.location.href, function(response) {#}
{#        const newTableBody = $(response).find('#orderTable tbody').html();#}
{#        $('#orderTable tbody').html(newTableBody);#}
{#    });#}
{#}#}
{##}
{##}
{#        // 下拉框样式控制（默认灰色字体，下拉选择后黑色）#}
{#        // 页面加载时初始化#}
{#        $(document).ready(function() {#}
{#            if ($('#status_choice').val() === '') {#}
{#                $('#status_choice').css('color', '#999');#}
{#            }#}
{#            // 选择变化时切换样式#}
{#            $('#status_choice').change(function() {#}
{#                if ($(this).val() === '') {#}
{#                    $(this).css('color', '#999');#}
{#                } else {#}
{#                    $(this).css('color', '#333');#}
{#                }#}
{#            });#}
{#        });#}

    </script>
{% endblock %}